/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="receipt-category">
			<view class="type">发票类型</view>
			<view class="invoice">
				<text>
					普通发票
				</text>
				<!-- <text>
					增值税专用发票
				</text> -->
			</view>
			<view class="prompt">1.开票金额不包括优惠劵和积分支付部分；</view>
			<view class="prompt">2.开单位抬头发票时，请准确填写对应的纳税人识别号，以免影响 您的发票报销；</view>
		</view>
		<view class="set-mes">
			<view class="invoice-remarks one">
				<view >发票抬头</view>
				<radio-group @change="radioTypeChange" class="radio-group" role="radiogroup">
					<block v-for="(item,index) in invoicesType">
						<label class="radio" role="radio" aria-disabled="false" aria-checked="true">
							<radio aria-checked="true" color="#ff3636" :value="item.name" :checked="item.checked" role="radio" aria-disabled="false"></radio>
							{{item.name}}
						</label>
					</block>
					<!-- <label class="radio" role="radio" aria-disabled="false" aria-checked="false">
						<radio color="#ff3636" value="1" role="radio" aria-disabled="false" aria-checked="false"></radio>
						单位
					</label> -->
				</radio-group>
			</view>
		
			<block v-if="selecttype==1">
				<view class="invoice-remarks two" >
					<view class="tit">单位名称</view>
					<view>
						<input v-model="name" placeholder="请填写单位名称" type="text">
						
						</input>
					</view>
				</view>
				<view class="invoice-remarks three">
					<view class="tit">纳税人识别号</view>
					<view>
						<input  v-model="number" placeholder="请填写纳税人识别号" type="text"></input>
					</view>
				</view>
			</block>
			<view class="invoice-remarks four" >
				<view class="tit">发票内容</view>
				<view class="bottom">
					<radio-group @change="radioContentChange" class="radio-group" role="radiogroup">
						<block v-for="(item,index) in invoicesContent">
							<label class="radio" role="radio" aria-disabled="false" aria-checked="false">
								<radio color="#ff3636" :value="item.name" role="radio" :checked="item.checked" aria-disabled="false" aria-checked="false"></radio>
								{{item.name}}
							</label>
						</block>
						
						
					</radio-group>
				</view>
			</view>
		</view>
		<button @tap="submit" class="use-btn" role="button" aria-disabled="false">
			确认

		</button>
	</view>
</template>

<script>
	import {getInvoice,putInvoice} from "../../../api/api.js";
	import common from "../../../common/common.js";
	export default {
		data() {
			return {
				invoicesType: [
				  { name: '个人', checked: true },
				  { name: '单位', checked: false }
				],
				invoicesContent: [
				  { name: '商品明细', checked: false },
				  { name: '商品类别', checked: false },
				  { name: '不开发票', checked: true }
				],
				selecttype:"",//当前 选择的类型
				invoicesToggle:false,//发票开关
				invoicesTypeToggle:false,//抬头开关
				invoice:"",//发票信息
				name:"",//单位名称
				number:"",//纳税人识别号
			};
		},
		watch: {
			invoicesType:{
				immediate: true,
				deep:true,
				handler(){
					this.invoicesType.map((item,index)=>{
						if(item.checked==true){
							this.selecttype= index;
						}
					})
				}
			}
		},
		onLoad(){
			/*获取发票*/ 
			this.getInvoice()
		},
		methods:{
			putInvoice(params){
				putInvoice(params).then(res=>{
					console.log(res)
				})
			},
			//获取发票
			getInvoice(){
				getInvoice().then(res=>{
					console.log(res)
					if(res!=""){
						if(res.invoice_title=="个人"){
							this.invoicesType[1].checked=false
							this.invoicesType[0].checked=true
						}else{
							
							this.invoicesType[0].checked=false
							this.invoicesType[1].checked=true
							this.name=res.invoice_title
							this.number=res.taxpayer
						}
						this.invoicesContent.forEach((i,index)=>{
							i.checked=false;
							this.invoicesTypeToggle=true;
							if(res.invoice_desc==i.name){
								i.checked=true;
							}
							if(res.invoice_desc=="不开发票"){
								this.invoicesTypeToggle=false;
							}
						})
					}
					
					
					
				})
			},
			/*发票内容*/
			radioContentChange(e){
				let invoicesContent=this.invoicesContent
				let value=e.detail.value
				invoicesContent.forEach((i,index)=>{
					i.checked=false;
					// this.invoicesTypeToggle=false;
					if(value==i.name){
						console.log(i.name)
						i.checked=true
					}
					if(value=="不开发票"){
						this.invoicesTypeToggle=false;
					}
				})
				
				this.invoicesContent=invoicesContent;	
				console.log(this.invoicesContent)
			},
			/*发票抬头*/
			radioTypeChange(e){
				let invoicesType=this.invoicesType
				let value=e.detail.value
				invoicesType.forEach((i,index)=>{
					i.checked=false;
					this.invoicesTypeToggle=false
					if(value==i.name){
						i.checked=true;
					}
					if(value=="单位"){
						this.invoicesTypeToggle=true
					}	
				})
				this.invoicesType=invoicesType
				console.log(this.invoicesType)
			},
			submit(){
				let invoice_title="";//发票抬头
				let invoice_desc="";//发票明细
				let taxpayer="";//纳税人识别号
				this.invoicesType.forEach((i,index)=>{
					if(i.checked==true){
						invoice_title=i.name;
						
					}
					if(i.checked==true&&i.name=="单位"){
						invoice_title=this.name;
						
					}
					
				})
				this.invoicesContent.forEach((i,index)=>{
					if(i.checked==true){
						invoice_desc=i
					}
				})
				
				let params={
					"invoice_title":invoice_title,//发票抬头
					"invoice_desc":invoice_desc.name,//发票明细/不开发票
					"taxpayer":this.number//纳税人识别号
				}
				console.log(params.taxpayer)
				if(params.invoice_desc!="不开发票"&&params.invoice_title==""){
					common.toast("none","单位名称不能为空",2000)
					return false;
				}
				if(params.invoice_desc!="不开发票"&&params.invoice_title!="个人"&&params.taxpayer==""){
					
					common.toast("none","纳税人识别号不能为空",2000)
					return false;
				}
				console.log(this.name)
				this.putInvoice(params)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.receipt-category {
		padding: 0 26rpx;
		background: #fff;
		border-top: 1px solid #f3f3f3;
		padding-bottom: 20rpx;
	}

	.receipt-category .type {
		font-size: 26rpx;
		color: #222;
		height: 94rpx;
		line-height: 94rpx;
	}

	.receipt-category .prompt {
		font-size: 24rpx;
		color: #ff3636;
		line-height: 34rpx;
		margin-bottom: 10rpx;
	}

	.invoice {
		font-size: 24rpx;
		margin-bottom: 33rpx;
	}

	.invoice text {
		display: inline-block;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		padding: 0 26rpx;
		border-radius: 5rpx;
		border: solid 2rpx #ff4545;
		margin-right: 48rpx;
		color: #ff4b4b;
	}

	.invoice text:nth-child(2) {
		color: #999999;
		border: solid 2rpx #f3f3f3;
	}

	.radio {
		transform: scale(0.8);
	}

	.radio radio {
		margin-right: 16rpx;
	}

	.set-mes {
		background-color: #fff;
		font-size: 30rpx;
		color: #333;
		border-top: 8px solid #eff1f2;
	}

	.invoice-remarks.one {
		height: 210rpx;
		line-height: 105rpx;
	}

	.invoice-remarks {
		padding: 0 26rpx;
		font-size: 26rpx;
		color: #262626;
	}

	.invoice-remarks.one view {
		display: inline-block;
	}

	.one radio-group {
		float: right;
	}

	.one radio-group label:nth-child(1) {
		margin-right: 70rpx;
	}

	.two .tit {
		border-top: 2rpx solid #f3f3f3;
	}

	.three {
		padding-bottom: 23rpx;
	}

	.four {
		border-top: 16rpx solid #f3f3f3;
	}

	.four .tit {
		height: 108rpx;
		line-height: 108rpx;
	}

	.four radio-group {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.set-mes input {
		width: 671rpx;
		height: 70rpx;
		background-color: #f4f4f4;
		border-radius: 3rpx;
		border: solid 2rpx #f3f3f3;
		padding-left: 27rpx;
		font-size: 24rpx;
	}

	input::-webkit-input-placeholder {
		color: #999;
	}

	.tit {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #262626;
	}

	.set-btn {
		display: flex;
		font-size: 24rpx;
	}

	.arrow-rigth {
		width: 32rpx;
		height: 32rpx;
	}

	.invoice-text {
		color: red;
	}

	.use-btn {
		text-align: center;
		color: #fff;
		font-size: 26rpx;
		width: 698rpx;
		height: 66rpx;
		background-color: #ff4343;
		border-radius: 33rpx;
		padding: 0 26rpx;
		margin-top: 110rpx;
	}

	.invoice-remarks label {
		display: inline-block;
		font-size: 30rpx;
		color: #1d1d1d;
	}

	.bottom {
		margin-left: -18rpx;
	}
</style>
